<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Smooth DnD Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/smooth-dnd@2.4.0/dist/smooth-dnd.min.css">
    <script src="../node_modules/smooth-dnd/dist/index.js"></script>
</head>
<body>

<ul id="source-list" class="list-group">
    <li class="list-group-item" data-id="1">Item 1</li>
    <li class="list-group-item" data-id="2">Item 2</li>
    <li class="list-group-item" data-id="3">Item 3</li>
</ul>

<ul id="target-list" class="list-group">
    <li class="list-group-item" data-id="4">Item 4</li>
    <li class="list-group-item" data-id="5">Item 5</li>
    <li class="list-group-item" data-id="6">Item 6</li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/smooth-dnd@2.4.0/dist/smooth-dnd.min.js"></script>
<script src="smooth-dnd01.js"></script>
</body>
</html>
